<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.table{
    border: 1px solid #ccc;
    border-collapse: collapse;
}
.table td,.table th{
    border: 1px solid #ccc;
    padding: 5px 10px;
}
</style>
</head>
<body>
    
<h1>用户列表</h1>
<table class="table">
    <tr>
        <th>账号</th>
        <th>昵称</th>
        <th>密码</th>
        <th>邮箱</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    {{each data}}
    <tr>
        <td>{{$value.username}}</td>
        <td>{{$value.nickname}}</td>
        <td>{{$value.password}}</td>
        <td>{{$value.email}}</td>
        <td>{{$value.sex}}</td>
        <td>{{$value.age}}</td>
    </tr>
    {{/each}}
</table>

<script src="http://localhost:9999/static/utils.js"></script>
<script>
//  页面交互逻辑
$('h1').onclick = function (){
    this.style.color = 'red';
}

// 服务端渲染（SSR->Server Side Rendering）
// 是指由服务端完成页面html结构拼接，并将页面发送到客户端的页面处理技术
// 前端写完html静态页面后交给后端作为一个模板使用

// 服务端渲染的特征：
// 1.数据传输量大，传输速度慢
// 2.前后端不分离，代码混乱，效率低
// 3.减少占用客户端运算资源，占用更多服务端运算资源
// 4.对SEO搜索引擎优化更友好，页面已经包含完整的结构和数据

</script>
</body>
</html>